<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物业管理主页面</title>

    <script src="js/vue3.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/element-plus.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
<!--    <script src="js/axios-interceptor.js"></script>-->
    <link rel="stylesheet" href="css/index.css"/>

    <style>
        .layout-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            font-family: "Helvetica Neue", Arial, sans-serif;
        }

        /* 顶部区域 */
        .header {
            height: 60px;
            background: #409eff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 40px;
            margin-right: 10px;
        }

        .title {
            font-size: 20px;
            font-weight: bold;
            margin: 0;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .username {
            cursor: pointer;
            color: #fff;
            display: flex;
            align-items: center;
        }

        /* 主体区域 */
        .main {
            display: flex;
            flex: 1;
        }

        /* 左侧菜单 */
        .sidebar {
            width: 220px;
            background: #f8f9fa;
            border-right: 1px solid #ddd;
            padding-top: 10px;
        }

        .el-menu {
            border-right: none;
        }

        /* 右侧内容 */
        .content {
            flex: 1;
            background: #fff;
            padding: 10px;
        }

        .content-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="layout-container">
            <!-- 顶部区域 -->
            <header class="header">
                <div class="header-left">
                    <img class="logo" src="/logo.png" alt="Logo" />
                    <h2 class="title">蜗牛楼宇管理系统</h2>
                </div>

                <div class="header-right">
                    <el-avatar :size="40" src="/avatar.png"></el-avatar>
                    <el-dropdown>
          <span class="el-dropdown-link username">
            {{ username }}
            <el-icon><arrow-down /></el-icon>
          </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人信息编辑</el-dropdown-item>
                                <el-dropdown-item>注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="main">
                <!-- 左侧菜单 -->
                <aside class="sidebar">
                    <el-menu default-active="1" class="el-menu-vertical-demo">
                        <el-sub-menu index="1">
                            <template #title>基础信息管理</template>
                            <el-menu-item index="1-1">
                                <el-link href="/pages/building.html" target="contentFrame">楼宇管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <el-link href="/pages/house.html" target="contentFrame">房屋管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <el-link href="/pages/owner.html" target="contentFrame">业主管理</el-link>
                            </el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="2">
                            <template #title>系统管理</template>
                            <el-menu-item index="2-1">
                                <el-link href="/pages/user.html" target="contentFrame">用户管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <el-link href="/pages/permission.html" target="contentFrame">权限管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="2-3">
                                <el-link href="/pages/role.html" target="contentFrame">角色管理</el-link>
                            </el-menu-item>
                            <el-menu-item index="2-4">
                                <el-link href="/pages/log.html" target="contentFrame">日志管理</el-link>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </aside>

                <!-- 右侧内容 iframe -->
                <section class="content">
                    <iframe name="contentFrame" class="content-iframe"></iframe>
                </section>
            </div>
        </div>
    </div>

<script>
    const {createApp, ref, reactive, onMounted, onUpdated} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    const app = createApp({

        setup() {

        }
    });
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 注册 Element Plus 图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app");
</script>
</body>
</html>